// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
//   width: $icon-home-width;
// }
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$capital-name: 'capital';
$capital-x: 0px;
$capital-y: 431px;
$capital-offset-x: 0px;
$capital-offset-y: -431px;
$capital-width: 18px;
$capital-height: 18px;
$capital-total-width: 224px;
$capital-total-height: 976px;
$capital-image: 'sprite_page_icons.png';
$capital: (0px, 431px, 0px, -431px, 18px, 18px, 224px, 976px, 'sprite_page_icons.png', 'capital', );
$date-name: 'date';
$date-x: 0px;
$date-y: 579px;
$date-offset-x: 0px;
$date-offset-y: -579px;
$date-width: 24px;
$date-height: 24px;
$date-total-width: 224px;
$date-total-height: 976px;
$date-image: 'sprite_page_icons.png';
$date: (0px, 579px, 0px, -579px, 24px, 24px, 224px, 976px, 'sprite_page_icons.png', 'date', );
$deposit-name: 'deposit';
$deposit-x: 0px;
$deposit-y: 516px;
$deposit-offset-x: 0px;
$deposit-offset-y: -516px;
$deposit-width: 22px;
$deposit-height: 21px;
$deposit-total-width: 224px;
$deposit-total-height: 976px;
$deposit-image: 'sprite_page_icons.png';
$deposit: (0px, 516px, 0px, -516px, 22px, 21px, 224px, 976px, 'sprite_page_icons.png', 'deposit', );
$edit-name: 'edit';
$edit-x: 0px;
$edit-y: 547px;
$edit-offset-x: 0px;
$edit-offset-y: -547px;
$edit-width: 22px;
$edit-height: 22px;
$edit-total-width: 224px;
$edit-total-height: 976px;
$edit-image: 'sprite_page_icons.png';
$edit: (0px, 547px, 0px, -547px, 22px, 22px, 224px, 976px, 'sprite_page_icons.png', 'edit', );
$eye-name: 'eye';
$eye-x: 0px;
$eye-y: 223px;
$eye-offset-x: 0px;
$eye-offset-y: -223px;
$eye-width: 22px;
$eye-height: 15px;
$eye-total-width: 224px;
$eye-total-height: 976px;
$eye-image: 'sprite_page_icons.png';
$eye: (0px, 223px, 0px, -223px, 22px, 15px, 224px, 976px, 'sprite_page_icons.png', 'eye', );
$eye-active-name: 'eyeActive';
$eye-active-x: 0px;
$eye-active-y: 36px;
$eye-active-offset-x: 0px;
$eye-active-offset-y: -36px;
$eye-active-width: 22px;
$eye-active-height: 12px;
$eye-active-total-width: 224px;
$eye-active-total-height: 976px;
$eye-active-image: 'sprite_page_icons.png';
$eye-active: (0px, 36px, 0px, -36px, 22px, 12px, 224px, 976px, 'sprite_page_icons.png', 'eyeActive', );
$logo-name: 'logo';
$logo-x: 0px;
$logo-y: 659px;
$logo-offset-x: 0px;
$logo-offset-y: -659px;
$logo-width: 224px;
$logo-height: 36px;
$logo-total-width: 224px;
$logo-total-height: 976px;
$logo-image: 'sprite_page_icons.png';
$logo: (0px, 659px, 0px, -659px, 224px, 36px, 224px, 976px, 'sprite_page_icons.png', 'logo', );
$look-name: 'look';
$look-x: 0px;
$look-y: 404px;
$look-offset-x: 0px;
$look-offset-y: -404px;
$look-width: 17px;
$look-height: 17px;
$look-total-width: 224px;
$look-total-height: 976px;
$look-image: 'sprite_page_icons.png';
$look: (0px, 404px, 0px, -404px, 17px, 17px, 224px, 976px, 'sprite_page_icons.png', 'look', );
$n1-name: 'n1';
$n1-x: 0px;
$n1-y: 58px;
$n1-offset-x: 0px;
$n1-offset-y: -58px;
$n1-width: 12px;
$n1-height: 12px;
$n1-total-width: 224px;
$n1-total-height: 976px;
$n1-image: 'sprite_page_icons.png';
$n1: (0px, 58px, 0px, -58px, 12px, 12px, 224px, 976px, 'sprite_page_icons.png', 'n1', );
$n2-name: 'n2';
$n2-x: 0px;
$n2-y: 80px;
$n2-offset-x: 0px;
$n2-offset-y: -80px;
$n2-width: 12px;
$n2-height: 12px;
$n2-total-width: 224px;
$n2-total-height: 976px;
$n2-image: 'sprite_page_icons.png';
$n2: (0px, 80px, 0px, -80px, 12px, 12px, 224px, 976px, 'sprite_page_icons.png', 'n2', );
$nav-account-name: 'nav_account';
$nav-account-x: 0px;
$nav-account-y: 325px;
$nav-account-offset-x: 0px;
$nav-account-offset-y: -325px;
$nav-account-width: 16px;
$nav-account-height: 16px;
$nav-account-total-width: 224px;
$nav-account-total-height: 976px;
$nav-account-image: 'sprite_page_icons.png';
$nav-account: (0px, 325px, 0px, -325px, 16px, 16px, 224px, 976px, 'sprite_page_icons.png', 'nav_account', );
$nav-activity-name: 'nav_activity';
$nav-activity-x: 0px;
$nav-activity-y: 273px;
$nav-activity-offset-x: 0px;
$nav-activity-offset-y: -273px;
$nav-activity-width: 16px;
$nav-activity-height: 16px;
$nav-activity-total-width: 224px;
$nav-activity-total-height: 976px;
$nav-activity-image: 'sprite_page_icons.png';
$nav-activity: (0px, 273px, 0px, -273px, 16px, 16px, 224px, 976px, 'sprite_page_icons.png', 'nav_activity', );
$nav-arrow-down-name: 'nav_arrow_down';
$nav-arrow-down-x: 0px;
$nav-arrow-down-y: 18px;
$nav-arrow-down-offset-x: 0px;
$nav-arrow-down-offset-y: -18px;
$nav-arrow-down-width: 14px;
$nav-arrow-down-height: 8px;
$nav-arrow-down-total-width: 224px;
$nav-arrow-down-total-height: 976px;
$nav-arrow-down-image: 'sprite_page_icons.png';
$nav-arrow-down: (0px, 18px, 0px, -18px, 14px, 8px, 224px, 976px, 'sprite_page_icons.png', 'nav_arrow_down', );
$nav-arrow-up-name: 'nav_arrow_up';
$nav-arrow-up-x: 0px;
$nav-arrow-up-y: 0px;
$nav-arrow-up-offset-x: 0px;
$nav-arrow-up-offset-y: 0px;
$nav-arrow-up-width: 14px;
$nav-arrow-up-height: 8px;
$nav-arrow-up-total-width: 224px;
$nav-arrow-up-total-height: 976px;
$nav-arrow-up-image: 'sprite_page_icons.png';
$nav-arrow-up: (0px, 0px, 0px, 0px, 14px, 8px, 224px, 976px, 'sprite_page_icons.png', 'nav_arrow_up', );
$nav-deposit-name: 'nav_deposit';
$nav-deposit-x: 0px;
$nav-deposit-y: 377px;
$nav-deposit-offset-x: 0px;
$nav-deposit-offset-y: -377px;
$nav-deposit-width: 18px;
$nav-deposit-height: 17px;
$nav-deposit-total-width: 224px;
$nav-deposit-total-height: 976px;
$nav-deposit-image: 'sprite_page_icons.png';
$nav-deposit: (0px, 377px, 0px, -377px, 18px, 17px, 224px, 976px, 'sprite_page_icons.png', 'nav_deposit', );
$nav-down-name: 'nav_down';
$nav-down-x: 0px;
$nav-down-y: 198px;
$nav-down-offset-x: 0px;
$nav-down-offset-y: -198px;
$nav-down-width: 16px;
$nav-down-height: 15px;
$nav-down-total-width: 224px;
$nav-down-total-height: 976px;
$nav-down-image: 'sprite_page_icons.png';
$nav-down: (0px, 198px, 0px, -198px, 16px, 15px, 224px, 976px, 'sprite_page_icons.png', 'nav_down', );
$nav-home-name: 'nav_home';
$nav-home-x: 0px;
$nav-home-y: 174px;
$nav-home-offset-x: 0px;
$nav-home-offset-y: -174px;
$nav-home-width: 16px;
$nav-home-height: 14px;
$nav-home-total-width: 224px;
$nav-home-total-height: 976px;
$nav-home-image: 'sprite_page_icons.png';
$nav-home: (0px, 174px, 0px, -174px, 16px, 14px, 224px, 976px, 'sprite_page_icons.png', 'nav_home', );
$nav-list-name: 'nav_list';
$nav-list-x: 0px;
$nav-list-y: 150px;
$nav-list-offset-x: 0px;
$nav-list-offset-y: -150px;
$nav-list-width: 16px;
$nav-list-height: 14px;
$nav-list-total-width: 224px;
$nav-list-total-height: 976px;
$nav-list-image: 'sprite_page_icons.png';
$nav-list: (0px, 150px, 0px, -150px, 16px, 14px, 224px, 976px, 'sprite_page_icons.png', 'nav_list', );
$nav-pingcang-name: 'nav_pingcang';
$nav-pingcang-x: 0px;
$nav-pingcang-y: 126px;
$nav-pingcang-offset-x: 0px;
$nav-pingcang-offset-y: -126px;
$nav-pingcang-width: 16px;
$nav-pingcang-height: 14px;
$nav-pingcang-total-width: 224px;
$nav-pingcang-total-height: 976px;
$nav-pingcang-image: 'sprite_page_icons.png';
$nav-pingcang: (0px, 126px, 0px, -126px, 16px, 14px, 224px, 976px, 'sprite_page_icons.png', 'nav_pingcang', );
$nav-share-name: 'nav_share';
$nav-share-x: 0px;
$nav-share-y: 351px;
$nav-share-offset-x: 0px;
$nav-share-offset-y: -351px;
$nav-share-width: 16px;
$nav-share-height: 16px;
$nav-share-total-width: 224px;
$nav-share-total-height: 976px;
$nav-share-image: 'sprite_page_icons.png';
$nav-share: (0px, 351px, 0px, -351px, 16px, 16px, 224px, 976px, 'sprite_page_icons.png', 'nav_share', );
$pass-name: 'pass';
$pass-x: 0px;
$pass-y: 248px;
$pass-offset-x: 0px;
$pass-offset-y: -248px;
$pass-width: 15px;
$pass-height: 15px;
$pass-total-width: 224px;
$pass-total-height: 976px;
$pass-image: 'sprite_page_icons.png';
$pass: (0px, 248px, 0px, -248px, 15px, 15px, 224px, 976px, 'sprite_page_icons.png', 'pass', );
$pay-fail-name: 'payFail';
$pay-fail-x: 0px;
$pay-fail-y: 705px;
$pay-fail-offset-x: 0px;
$pay-fail-offset-y: -705px;
$pay-fail-width: 42px;
$pay-fail-height: 42px;
$pay-fail-total-width: 224px;
$pay-fail-total-height: 976px;
$pay-fail-image: 'sprite_page_icons.png';
$pay-fail: (0px, 705px, 0px, -705px, 42px, 42px, 224px, 976px, 'sprite_page_icons.png', 'payFail', );
$pay-success-name: 'paySuccess';
$pay-success-x: 0px;
$pay-success-y: 757px;
$pay-success-offset-x: 0px;
$pay-success-offset-y: -757px;
$pay-success-width: 43px;
$pay-success-height: 43px;
$pay-success-total-width: 224px;
$pay-success-total-height: 976px;
$pay-success-image: 'sprite_page_icons.png';
$pay-success: (0px, 757px, 0px, -757px, 43px, 43px, 224px, 976px, 'sprite_page_icons.png', 'paySuccess', );
$photo-name: 'photo';
$photo-x: 0px;
$photo-y: 895px;
$photo-offset-x: 0px;
$photo-offset-y: -895px;
$photo-width: 81px;
$photo-height: 81px;
$photo-total-width: 224px;
$photo-total-height: 976px;
$photo-image: 'sprite_page_icons.png';
$photo: (0px, 895px, 0px, -895px, 81px, 81px, 224px, 976px, 'sprite_page_icons.png', 'photo', );
$platform-name: 'platform';
$platform-x: 0px;
$platform-y: 613px;
$platform-offset-x: 0px;
$platform-offset-y: -613px;
$platform-width: 43px;
$platform-height: 36px;
$platform-total-width: 224px;
$platform-total-height: 976px;
$platform-image: 'sprite_page_icons.png';
$platform: (0px, 613px, 0px, -613px, 43px, 36px, 224px, 976px, 'sprite_page_icons.png', 'platform', );
$star-name: 'star';
$star-x: 0px;
$star-y: 487px;
$star-offset-x: 0px;
$star-offset-y: -487px;
$star-width: 20px;
$star-height: 19px;
$star-total-width: 224px;
$star-total-height: 976px;
$star-image: 'sprite_page_icons.png';
$star: (0px, 487px, 0px, -487px, 20px, 19px, 224px, 976px, 'sprite_page_icons.png', 'star', );
$tip-name: 'tip';
$tip-x: 0px;
$tip-y: 459px;
$tip-offset-x: 0px;
$tip-offset-y: -459px;
$tip-width: 18px;
$tip-height: 18px;
$tip-total-width: 224px;
$tip-total-height: 976px;
$tip-image: 'sprite_page_icons.png';
$tip: (0px, 459px, 0px, -459px, 18px, 18px, 224px, 976px, 'sprite_page_icons.png', 'tip', );
$transfer-name: 'transfer';
$transfer-x: 0px;
$transfer-y: 810px;
$transfer-offset-x: 0px;
$transfer-offset-y: -810px;
$transfer-width: 217px;
$transfer-height: 75px;
$transfer-total-width: 224px;
$transfer-total-height: 976px;
$transfer-image: 'sprite_page_icons.png';
$transfer: (0px, 810px, 0px, -810px, 217px, 75px, 224px, 976px, 'sprite_page_icons.png', 'transfer', );
$upload-name: 'upload';
$upload-x: 0px;
$upload-y: 299px;
$upload-offset-x: 0px;
$upload-offset-y: -299px;
$upload-width: 13px;
$upload-height: 16px;
$upload-total-width: 224px;
$upload-total-height: 976px;
$upload-image: 'sprite_page_icons.png';
$upload: (0px, 299px, 0px, -299px, 13px, 16px, 224px, 976px, 'sprite_page_icons.png', 'upload', );
$what-name: 'what';
$what-x: 0px;
$what-y: 102px;
$what-offset-x: 0px;
$what-offset-y: -102px;
$what-width: 14px;
$what-height: 14px;
$what-total-width: 224px;
$what-total-height: 976px;
$what-image: 'sprite_page_icons.png';
$what: (0px, 102px, 0px, -102px, 14px, 14px, 224px, 976px, 'sprite_page_icons.png', 'what', );
$spritesheet-width: 224px;
$spritesheet-height: 976px;
$spritesheet-image: 'sprite_page_icons.png';
$spritesheet-sprites: ($capital, $date, $deposit, $edit, $eye, $eye-active, $logo, $look, $n1, $n2, $nav-account, $nav-activity, $nav-arrow-down, $nav-arrow-up, $nav-deposit, $nav-down, $nav-home, $nav-list, $nav-pingcang, $nav-share, $pass, $pay-fail, $pay-success, $photo, $platform, $star, $tip, $transfer, $upload, $what, );
$spritesheet: (224px, 976px, 'sprite_page_icons.png', $spritesheet-sprites, );

// The provided mixins are intended to be used with the array-like variables
//
// .icon-home {
//   @include sprite-width($icon-home);
// }
//
// .icon-email {
//   @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
//   display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
